<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>FusionWidgets XT - My First Chart </title>
        <script type="text/javascript" src="../../Charts/FusionCharts.js"></script>
		<script type="text/javascript" language="Javascript" src="../assets/ui/js/jquery.min.js"></script>
		<script type="text/javascript" language="Javascript" src="../assets/ui/js/lib.js"></script>

        <link href="../assets/ui/css/style.css" rel="stylesheet" type="text/css" />

        <!--[if IE 6]>
        <script type="text/javascript" src="../assets/ui/js/DD_belatedPNG_0.0.8a-min.js"></script>

		<script>
          /* select the element name, css selector, background etc */
          DD_belatedPNG.fix('img');

          /* string argument can be any CSS selector */
        </script>
        <![endif]-->
		
		<style type="text/css">
            h2.headline {
                font: normal 110%/137.5% "Trebuchet MS", Arial, Helvetica, sans-serif;
                padding: 0;
                margin: 25px 0 25px 0;
                color: #7d7c8b;
                text-align: center;
            }
            p.small {
                font: normal 68.75%/150% Verdana, Geneva, sans-serif;
                color: #919191;
                padding: 0;
                margin: 0 auto;
                width: 664px;
                text-align: center;
            }
        </style>
		
		</head>
    <body>

        <div id="wrapper">

            <div id="header">
                

               <div class="logo"><a class="imagelink"  href="http://www.fusioncharts.com/widgets" target="_blank"><img src="../assets/ui/images/fwxt-logo.png" width="73" height="74" alt="FusionWidgets XT logo" /></a></div>
				 <h1 class="brand-name">FusionWidgets XT</h1>
                <h1 class="logo-text">First Angular gauge using FusionWidgets</h1>
            </div>
			
			 <div class="content-area">
                <div id="content-area-inner-main">
                    <p class="text" align="center">The sample displays an angular gauge showing the value of Customer Satisfaction Survey, on a scale of 0 to 100%.</p>
					<div id="messageBox" style="margin-left:130px; margin-right:130px; display:none;"></div>
					<p>&nbsp;</p>

                    <div class="gen-chart-render">

                        <div id="chartContainer">FusionWidgets XT will load here!</div>
						
                        <script type="text/javascript"><!--
						var myChart = new FusionCharts( "../../Charts/AngularGauge.swf", 
      					"myChartId", "400", "200", "0", "1" );
      					 
						 myChart.setXMLData('<chart lowerLimit="0" upperLimit="100" lowerLimitDisplay="Bad" upperLimitDisplay="Good" numberSuffix="%" showValue="1">\n\
<colorRange>\n\
<color minValue="0" maxValue="75" code="FF654F"/>\n\
<color minValue="75" maxValue="90" code="F6BD0F"/>\n\
<color minValue="90" maxValue="100" code="8BBA00"/>\n\
</colorRange>\n\
<dials>\n\
<dial value="92" />\n\
</dials>\n\
</chart>');
      					 myChart.render("chartContainer");
						 // -->
						 </script>
						
						 </div>
                    <div class="clear"></div>
                    <p>&nbsp;</p>
                    <p class="small">    </p>
                    <div class="underline-dull"></div>
                </div>
            </div>
			<div id="footer">
                <p class="highlightBlock">The above sample showcases how to create a simple Angular Gauge. Click <a href="../../Contents/Index.html?Angular/Create.html" target="_blank">here</a> to know more on how the code of this example works.</p>
            </div>
        </div>
        </div>
		 <script type="text/javascript"><!--//
			$(document).ready ( function() {
			   showConditionalMessage( "Your browser does not seem to have Flash Player support. JavaScript chart is rendered instead.", isJSRenderer(myChart) );
			});	
		// -->
		</script>
    </body>
</html>


    
   